<template>
    <section class="cont">
        <section class="top">
            <router-link to="/yongjinfafang" :class="{on : nav_on == 1}">{{$t('dailizhongxin.yongjinfafang')}}</router-link>
            <router-link to="/huiyuangcunkuang" :class="{on : nav_on == 2}">{{$t('dailizhongxin.huiyuangcunkuang')}}</router-link>
            <router-link to="/huiyuangtixian" :class="{on : nav_on == 3}">{{$t('dailizhongxin.huiyuangtixian')}}</router-link>
            <router-link to="/huiyuan" :class="{on : nav_on == 4}">{{$t('dailizhongxin.huiyuan')}}</router-link>
            <router-link to="/huiyuanshuying" :class="{on : nav_on == 5}">{{$t('dailizhongxin.huiyuanshuying')}}</router-link>
        </section>
        <section class="top2" v-if="nav_on < 4">
            <article>{{$t('jilv.riqi_title')}}：</article>
            <article>
                <span :class="{on:tian_on == 1}" @click="fun_tian(1)">{{$t('jilv.riqi[0]')}}</span>
                <span :class="{on:tian_on == 2}" @click="fun_tian(2)">{{$t('jilv.riqi[1]')}}</span>
                <span :class="{on:tian_on == 3}" @click="fun_tian(3)">{{$t('jilv.riqi[2]')}}</span>
                <span :class="{on:tian_on == 5}" @click="fun_tian(5)">{{$t('jilv.riqi[3]')}}</span>
                <span :class="{on:tian_on == 7}" @click="fun_tian(7)">{{$t('jilv.riqi[4]')}}</span>
                <span :class="{on:tian_on == 30}" @click="fun_tian(30)">{{$t('jilv.riqi[5]')}}</span>
            </article>
        </section>
		
		<section class="top2" v-if="nav_on == 5">
		    <article>{{$t('jilv.riqi_title')}}：</article>
		    <article>
		        <van-cell title="选择日期" :value="date" @click="show = true" />
		        <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate"/>
		    </article>
		</section>
    </section>
</template>

<script>
	import { Calendar,Cell } from 'vant';
    export default {
        name: "jilv-top",
		components: {
		    [Calendar.name]: Calendar,
			[Cell.name]: Cell
		},
        data() {
            return {
                tian_on: 1,
                nav_on: 1,
				date: '',
				show: false,
				minDate: new Date(2011, 0, 1),
            }
        },
        mounted() {
            let fullPath = this.$route.path
            switch (fullPath) {
                case '/yongjinfafang':
                    this.nav_on = 1
                    break;
                case '/huiyuangcunkuang':
                    this.nav_on = 2
                    break;
                case '/huiyuangtixian':
                    this.nav_on = 3
                    break;
                case '/huiyuan':
                    this.nav_on = 4
                    break;
                default:
                    this.nav_on = 5
                    break;
            }

        },
        methods: {
			formatDate(date) {
			      return `${date.getMonth() + 1}-${date.getDate()}`;
			    },
			    onConfirm(date) {
			      const [start, end] = date;
			      this.show = false;
			      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
				  
				  this.$emit('fun_date',`${start.getFullYear()}-${this.formatDate(start)},${end.getFullYear()}-${this.formatDate(end)}`)
				  
	
			    },
            fun_tian(int){
                this.tian_on = int
                this.$emit('fun_tian',int)
            }
        }
    }
</script>

<style scoped lang="less">
.cont{
    position: fixed;
    top: 1.2rem;
    width: 100%;
    .top{
        background: #3a3a3a;
        font-size: .341rem;
        display: flex;
        a{
            width: 20%;
            color: #fff;
            line-height: .9rem;
            &.on{
                background: #3b454a;
            }
        }
    }
    .top2{
        background: #837863;
        display: flex;
        padding: .2rem .4rem .2rem .1rem;
        article{
            line-height: .8rem;
            &:first-child{
                width: 24%;
                color: #fff;
                font-size: .4rem;
            }
            &:last-child{
                background: #fff;
                border-radius: .1rem;
                overflow: hidden;
                width: 76%;
                font-size: .32rem;
                display: flex;
                span{
                    width: 16.66%;
                    color: #999;
                    &.on{
                        background-color: #eaeaea;
                        color: #404042;
                    }
                }
            }
        }
    }
}
</style>
